<template>
    <!-- #ifdef MP-WEIXIN -->
    <view class="w-full h-60px"></view>
    <Store></Store>
    <Banner></Banner>
    <view id="food" class="flex w-full" ref="food">
        <view class="w-1/4 width-25">
            <Kind></Kind>
        </view>
        <view class="w-3/4 width-75 p2">
            <text class="block w-full h-10px text-sm pt-2 pb-4">{{ nowKind }}</text>
            <Goods :foodHeight="foodHeight" :foodBottom="foodBottom" @open="open"></Goods>
        </view>
    </view>
    <!-- #endif -->
    <!-- #ifdef H5 -->
    <Suspense>
        <template v-slot:default>
            <Store></Store>
        </template>
        <template v-slot:fallback>
            <SkeStore></SkeStore>
        </template>
    </Suspense>
    <Suspense>
        <template v-slot:default>
            <Banner></Banner>
        </template>
        <template v-slot:fallback>
            <SkeBanner></SkeBanner>
        </template>
    </Suspense>
    <view id="food" class="flex w-full" ref="food">
        <view class="w-1/4 width-25">
            <Suspense>
                <template v-slot:default>
                    <Kind></Kind>
                </template>
                <template v-slot:fallback>
                    <SkeKind></SkeKind>
                </template>
            </Suspense>
        </view>
        <view class="w-3/4 width-75 p2">
            <text class="block w-full h-10px text-sm pt-2 pb-4">{{ nowKind }}</text>
            <Suspense>
                <template v-slot:default>
                    <Goods :foodHeight="foodHeight" :foodBottom="foodBottom" @open="open"></Goods>
                </template>
                <template v-slot:fallback>
                    <SkeGoods></SkeGoods>
                </template>
            </Suspense>
        </view>
    </view>
    <!-- #endif -->
    <!-- 规格 -->
    <Specification :showStatus="showStatus" @close="close"></Specification>
    <!-- 已选菜单 -->
    <Food :foodStatus="foodStatus" @closeFood="closeFood"></Food>
    <!-- 计费 -->
    <Pay :foodBottom="foodBottom" :foodStatus="H5status" @openFood="openFood"></Pay>
</template>

<script setup lang="ts">
import { Ref, ComponentInternalInstance } from 'vue'
import { onPullDownRefresh } from '@dcloudio/uni-app'
import Pay from '@/component/pay.vue'
import Specification from '@/component/specification.vue'
import Food from '@/component/food.vue'
// #ifdef MP-WEIXIN
import Store from '@/component/store.vue'
import Banner from '@/component/banner.vue'
import Kind from '@/component/kind.vue'
import Goods from '@/component/goods.vue'
// #endif
// #ifdef H5
import SkeStore from '@/component/Skeleton/store.vue'
import SkeBanner from '@/component/Skeleton/banner.vue'
import SkeKind from '@/component/Skeleton/kind.vue'
import SkeGoods from '@/component/Skeleton/goods.vue'
const Store = defineAsyncComponent(() => import('@/component/store.vue'))
const Banner = defineAsyncComponent(() => import('@/component/banner.vue'))
const Kind = defineAsyncComponent(() => import('@/component/kind.vue'))
const Goods = defineAsyncComponent(() => import('@/component/goods.vue'))
// #endif
onPullDownRefresh((): void => {
    setTimeout((): void => {
        uni.stopPullDownRefresh()
    }, 1000);
})
let nowKind: Ref = ref<string>('')
setTimeout((): void => {
    nowKind.value = '热销美食'
}, 1000)
let num: number = 0
let windowHeight: Ref = ref<number>(num)
let foodHeight: Ref = ref<number>(num)
let foodBottom: Ref = ref<number>(num)
const instance: ComponentInternalInstance | null = getCurrentInstance()
onMounted((): void => {
    uni.getSystemInfo({
        complete(res): void {
            windowHeight.value = res.windowHeight
            // #ifdef H5
            let { $refs } = (getCurrentInstance() as any).proxy
            foodHeight.value = res.windowHeight - $refs.food.$el.offsetTop - 10
            foodBottom.value = res.windowBottom + 20
            // #endif
            // #ifdef MP-WEIXIN
            let query = uni.createSelectorQuery().in(instance)
            query.select('#food').boundingClientRect((data: any): void => {
                foodHeight.value = res.windowHeight - data.top - 20
                foodBottom.value = res.windowBottom + 20
            }).exec()
            // #endif
        }
    })
})
const showStatus: Ref = ref<boolean>(false)
const foodStatus: Ref = ref<boolean>(false)
const H5status: Ref = ref<boolean>(false) // H5的底部高度不算tabbar，所以需要兼容处理
const open = (e: boolean) => {
    showStatus.value = e
}
const openFood = (e: boolean) => {
    foodStatus.value = e
    // #ifdef H5
    H5status.value = e
    // #endif
}
const close = (e: boolean) => {
    showStatus.value = e
    uni.showTabBar()
}
const closeFood = (e: boolean) => {
    foodStatus.value = e
    // #ifdef H5
    H5status.value = e
    // #endif
    uni.showTabBar()
}
</script>

<style scoped>

</style>